<template>
  <div class="app-container calendar-list-container">
    <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit
              highlight-current-row style="width: 100%">
      <globalTableColumn :data="list" :loading.sync="listLoading" :key="key" :config="globalConfig" align="center"
                         label="编号" prop="serialNumber" width="150"></globalTableColumn>
      <globalTableColumn :data="list" :loading.sync="listLoading" :key="key" :config="globalConfig" align="center"
                         type="select"
                         label="所属店铺" prop="storeId" :load="storeRemoteDataUrl"></globalTableColumn>
      <globalTableColumn :data="list" :loading.sync="listLoading" :key="key" :config="globalConfig" align="center"
                         type="select" label="订单状态" prop="orderStatus" width="100">
      </globalTableColumn>
      <globalTableColumn :data="list" :loading.sync="listLoading" :key="key" :config="globalConfig" align="center"
                         label="商品名称" prop="goodsName" width="150"></globalTableColumn>
      <globalTableColumn :data="list" :loading.sync="listLoading" :key="key" :config="globalConfig" align="center"
                         type="img"
                         label="商品图片" prop="picUrl" width="80"></globalTableColumn>
      <globalTableColumn :data="list" :loading.sync="listLoading" :key="key" :config="globalConfig" align="center"
                         label="下单数量" prop="quantity" width="100"></globalTableColumn>
      <el-table-column property="specificationName" label="规格属性" width="250" align="center">
        <template slot-scope="scope">
          <el-tag v-for="item in scope.row.specificationName" :key="item" :title="item">
            {{ item }}
          </el-tag>
        </template>
      </el-table-column>

      <globalTableColumn :data="list" :loading.sync="listLoading" :key="key" :config="globalConfig" align="center"
                         label="配送方式" prop="shippingId" width="100" type="select"
                         :load="shipListRemoteDataUrl"></globalTableColumn>
      <globalTableColumn :data="list" :loading.sync="listLoading" :key="key" :config="globalConfig" align="center"
                         label="商品单价" prop="retailPrice" width="100"></globalTableColumn>
      <globalTableColumn :data="list" :loading.sync="listLoading" :key="key" :config="globalConfig" align="center"
                         label="订单金额" prop="actualAmount" width="100"></globalTableColumn>
      <globalTableColumn :data="list" :loading.sync="listLoading" :key="key" :config="globalConfig" align="center"
                         label="总运费" prop="freightTotalPrice" width="100"></globalTableColumn>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button v-if="subOrdersManager_btn_upd" size="small" type="success" @click="handleUpdate(scope.row)">编辑
          </el-button>
          <el-button v-if="subOrdersManager_btn_del" size="mini" type="danger" @click="handleDelete(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">返 回</el-button>
    </div>


    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px">
        <globalFormItem :key="formKey" :config="globalConfig" label="发货备注" v-model="form.memo" prop="memo"
                        placeholder="请输入发货备注">
        </globalFormItem>
        <globalFormItem :key="formKey" :config="globalConfig" label="完成日期" v-model="form.completeDate"
                        prop="completeDate"
                        placeholder="请输入完成日期"></globalFormItem>
        <globalFormItem :key="formKey" :config="globalConfig" label="数量" v-model="form.quantity" prop="quantity"
                        placeholder="请输入数量"></globalFormItem>
        <globalFormItem :key="formKey" :config="globalConfig" label="配送方式名称" v-model="form.logisticsNumber"
                        prop="logisticsNumber"
                        placeholder="请输入配送方式名称"></globalFormItem>
        <globalFormItem :key="formKey" :config="globalConfig" label="配送方式" v-model="form.shippingId" prop="shippingId"
                        placeholder="请输入配送方式"></globalFormItem>
        <globalFormItem :key="formKey" :config="globalConfig" label="状态" v-model="form.orderStatus" prop="orderStatus"
                        placeholder="请输入状态"></globalFormItem>
        <globalFormItem :key="formKey" :config="globalConfig" label="会员" v-model="form.userId" prop="userId"
                        placeholder="请输入会员"></globalFormItem>
        <globalFormItem :key="formKey" :config="globalConfig" label="店铺" v-model="form.storeId" prop="storeId"
                        placeholder="请输入店铺"></globalFormItem>
        <globalFormItem :key="formKey" :config="globalConfig" label="商品sku" v-model="form.skuId" prop="skuId"
                        placeholder="请输入商品sku"></globalFormItem>
        <globalFormItem :key="formKey" :config="globalConfig" label="现金总价格" v-model="form.retailTotalPrice"
                        prop="retailTotalPrice"
                        placeholder="请输入现金总价格"></globalFormItem>
        <globalFormItem :key="formKey" :config="globalConfig" label="总运费" v-model="form.freightTotalPrice"
                        prop="freightTotalPrice"
                        placeholder="请输入总运费"></globalFormItem>
        <globalFormItem :key="formKey" :config="globalConfig" label="实付订单金额" v-model="form.actualAmount"
                        prop="actualAmount"
                        placeholder="请输入实付订单金额"></globalFormItem>
        <globalFormItem :key="formKey" :config="globalConfig" label="现金价格" v-model="form.retailPrice" prop="retailPrice"
                        placeholder="请输入现金价格"></globalFormItem>
        <globalFormItem :key="formKey" :config="globalConfig" label="运费" v-model="form.freightPrice" prop="freightPrice"
                        placeholder="请输入运费"></globalFormItem>
        <globalFormItem :key="formKey" :config="globalConfig" label="订单" v-model="form.orderId" prop="orderId"
                        placeholder="请输入订单"></globalFormItem>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel('form')">取 消</el-button>
        <el-button v-if="dialogStatus=='create'" type="primary" @click="create('form')">确 定</el-button>
        <el-button v-else type="primary" @click="update('form')">修 改</el-button>
      </div>
    </el-dialog>


    <el-dialog :title="textMap[goodsDialogStatus]" :visible.sync="goodsDialogFormVisible">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px">
        <globalTableColumn :data="list" :loading.sync="listLoading" :key="key" :config="globalConfig" align="center"
                           label="编号" prop="serialNumber"></globalTableColumn>
        <globalTableColumn :data="list" :loading.sync="listLoading" :key="key" :config="globalConfig" align="center"
                           label="创建日期" prop="createDate"></globalTableColumn>
        <globalTableColumn :data="list" :loading.sync="listLoading" :key="key" :config="globalConfig" align="center"
                           label="店铺" prop="subOrderId"></globalTableColumn>
        <globalTableColumn :data="list" :loading.sync="listLoading" :key="key" :config="globalConfig" align="center"
                           label="现金价格" prop="retailPrice"></globalTableColumn>
        <globalTableColumn :data="list" :loading.sync="listLoading" :key="key" :config="globalConfig" align="center"
                           label="运费" prop="freightPrice"></globalTableColumn>
        <globalTableColumn :data="list" :loading.sync="listLoading" :key="key" :config="globalConfig" align="center"
                           label="商品名称" prop="goodsName"></globalTableColumn>
        <globalTableColumn :data="list" :loading.sync="listLoading" :key="key" :config="globalConfig" align="center"
                           label="图片" prop="picUrl" type="img"></globalTableColumn>
        <globalTableColumn :data="list" :loading.sync="listLoading" :key="key" :config="globalConfig" align="center"
                           label="规格名称" prop="specificationName"></globalTableColumn>
        <globalTableColumn :data="list" :loading.sync="listLoading" :key="key" :config="globalConfig" align="center"
                           label="规格值" prop="specificationValues"></globalTableColumn>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelGoods('form')">关闭</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<style scoped>
  .filter-item {
    margin-left: 10px;
  }

  .el-card__body {
    padding: 10px !important;
  }

  .el-card {
    padding-top: 10px;
  }
</style>

<script>
  import {
    fetchList,
    getObj,
    addObj,
    putObj,
    delObj,
    casObj
  } from '@/api/order/subOrders'
  import {
    remoteData as orderUserInfoRemoteData
  } from '@/api/user/usersInfo'
  import {
    remoteData as storeInfoRemoteData
  } from '@/api/store/store.js'
  import waves from '@/directive/waves/index.js' // 水波纹指令
  import {
    mapGetters
  } from 'vuex'
  import {
    globalNotify
  } from '@/util/notifyUtils' //弹窗
  import {
    getToken
  } from '@/util/auth'
  import globalSearchTemplate from '@/components/global-el-search-template'
  import globalTableColumn from '@/components/global-el-table-column'
  import globalFormItem from '@/components/global-el-form-item'
  import { remoteData as userRemoteData } from '@/api/user/usersInfo'
  import { remoteData as storeRemoteData } from '@/api/store/store'
  import { remoteData as shippingInfoRemoteData } from '@/api/order/shippingInfo.js'

  export default {
    name: 'subOrders',
    components: {
      globalSearchTemplate,
      globalTableColumn,
      globalFormItem
    },
    directives: {
      waves
    },
    data() {
      return {
        userRemoteDataUrl: userRemoteData,
        storeRemoteDataUrl: storeRemoteData,
        shipListRemoteDataUrl: shippingInfoRemoteData,
        globalConfig: {
          module: ['order'],
          componentName: ['subOrders', 'orders']
        },
        list: null,
        total: null,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 1000,
          'startTime': undefined,
          'endTime': undefined,
          'memo': undefined,
          'completeDate': undefined,
          'quantity': undefined,
          'logisticsNumber': undefined,
          'shippingId': undefined,
          'orderStatus': undefined,
          'userId': undefined,
          'storeId': undefined,
          'skuId': undefined,
          'retailTotalPrice': undefined,
          'freightTotalPrice': undefined,
          'actualAmount': undefined,
          'retailPrice': undefined,
          'freightPrice': undefined,
          'orderId': undefined
        },
        rules: {},
        form: {
          'memo': undefined,
          'completeDate': undefined,
          'quantity': undefined,
          'logisticsNumber': undefined,
          'shippingId': undefined,
          'orderStatus': undefined,
          'userId': undefined,
          'storeId': undefined,
          'skuId': undefined,
          'retailTotalPrice': undefined,
          'freightTotalPrice': undefined,
          'actualAmount': undefined,
          'retailPrice': undefined,
          'freightPrice': undefined,
          'orderId': undefined
        },
        dialogFormVisible: false,
        dialogStatus: '',
        goodsDialogFormVisible: false,
        goodsDialogStatus: '',
        subOrdersManager_btn_add: false,
        subOrdersManager_btn_upd: false,
        subOrdersManager_btn_del: false,
        orderGoodsManager_btn_find: false,
        textMap: {
          update: '编辑',
          create: '创建'
        },
        tableKey: 0,
        headers: {
          Authorization: 'Bearer ' + getToken()
        },
        casDataUrl: casObj,
        key: '',
        formKey: ''
      }
    },
    computed: {
      ...mapGetters([
        'permissions'
      ])
    },
    filters: {},
    created() {
      this.getList()
      this.subOrdersManager_btn_add = this.permissions['subOrdersManager_btn_add']
      this.subOrdersManager_btn_upd = this.permissions['subOrdersManager_btn_upd']
      this.subOrdersManager_btn_del = this.permissions['subOrdersManager_btn_del']
      this.orderGoodsManager_btn_find = this.permissions['orderGoodsManager_btn_find']
    },
    methods: {
      getList() {
        this.listQuery.orderId = this.$route.query.orderId
        this.listLoading = true
        fetchList(this.listQuery).then(response => {
          this.list = response.data.data.records
          this.refreshTable()
          this.total = response.data.data.total
          this.listLoading = false
        })
      },
      handleCancel() {
        this.$store.commit("DEL_CURRENT_TAG", null);
        this.$router.push({
          path: '/order/orders'
        })
      },
      handleSizeChange(val) {
        this.listQuery.limit = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.getList()
      },
      handleDelete(row) {
        delObj(row.id)
          .then(response => {
            this.dialogFormVisible = false
            this.getList()
            globalNotify(this, response)
          })
      },
      handleCreate() {
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
        this.resetForm()
        this.refreshForm()
      },
      refreshTable() {
        this.key = new Date().getTime()
      },
      refreshForm() {
        this.formKey = new Date().getTime()
      },
      handleUpdate(row) {
        this.resetForm()
        getObj(row.id).then(response => {
          this.form = response.data.data
          this.refreshForm()
          this.dialogFormVisible = true
          this.dialogStatus = 'update'
        })
      },
      handleFindOrderGoods(row) {
        this.resetForm()
        getObj(row.id).then(response => {
          this.form = response.data.data
          this.refreshForm()
          this.dialogFormVisible = true
          this.dialogStatus = 'update'
        })
      },
      create(formName) {
        const set = this.$refs
        set[formName].validate(valid => {
          if (valid) {
            addObj(this.form)
              .then((response) => {
                this.dialogFormVisible = false
                this.getList()
                globalNotify(this, response)
              })
          } else {
            return false
          }
        })
      },
      cancel(formName) {
        this.resetForm()
        this.dialogFormVisible = false
      },
      cancelGoods(formName) {
        this.goodsDialogFormVisible = false
      },
      update(formName) {
        const set = this.$refs
        set[formName].validate(valid => {
          if (valid) {
            this.dialogFormVisible = false
            this.form.password = undefined
            putObj(this.form).then((response) => {
              this.dialogFormVisible = false
              this.getList()
              globalNotify(this, response)
            })
          } else {
            return false
          }
        })
      },
      resetForm() {
        this.form = {
          'memo': undefined,
          'completeDate': undefined,
          'quantity': undefined,
          'logisticsNumber': undefined,
          'shippingId': undefined,
          'orderStatus': undefined,
          'userId': undefined,
          'storeId': undefined,
          'skuId': undefined,
          'retailTotalPrice': undefined,
          'freightTotalPrice': undefined,
          'actualAmount': undefined,
          'retailPrice': undefined,
          'freightPrice': undefined,
          'orderId': undefined
        }
      },
      handleSearch() {
        this.listQuery.page = 1
        this.getList()
      }
    }
  }
</script>
